<p>This rule raises an issue when array methods like <code>map()</code>, <code>filter()</code>, <code>find()</code>, etc. are called with a
<code>thisArg</code> parameter.</p>
<h2>Why is this an issue?</h2>
<p>JavaScript array methods accept an optional <code>thisArg</code> parameter that sets the <code>this</code> context for the callback function.
However, using this parameter often leads to confusion and less readable code.</p>
<p>There are several problems with using <code>thisArg</code>:</p>
<p><strong>Arrow functions ignore <code>thisArg</code></strong>: Arrow functions don’t have their own <code>this</code> context and cannot be bound to
a different <code>this</code> value. When you pass a <code>thisArg</code> with an arrow function, it has no effect, making the code misleading.</p>
<p><strong>Regular functions become less explicit</strong>: When using regular functions with <code>thisArg</code>, the relationship between the
callback and the context object becomes less clear. Readers must understand that the second parameter affects the <code>this</code> binding inside the
callback.</p>
<p><strong>Better alternatives exist</strong>: Modern JavaScript provides clearer ways to access external values in callbacks. You can directly
reference variables from the outer scope, use explicit binding with <code>.bind()</code>, or restructure the code to avoid <code>this</code>
altogether.</p>
<p>Using <code>thisArg</code> makes code harder to understand and maintain, especially for developers who may not be familiar with JavaScript’s
complex <code>this</code> binding rules.</p>
<h3>What is the potential impact?</h3>
<p>Using <code>thisArg</code> unnecessarily can lead to:</p>
<ul>
  <li> <strong>Bugs</strong>: When arrow functions are used with <code>thisArg</code>, developers might expect the <code>this</code> binding to work,
  but it doesn’t </li>
  <li> <strong>Confusion</strong>: Code becomes harder to read and understand, especially for team members less familiar with JavaScript’s
  <code>this</code> behavior </li>
  <li> <strong>Maintenance issues</strong>: Future modifications might break the intended <code>this</code> binding without clear indication </li>
</ul>
<h3>How to fix?</h3>
<p>Remove the unnecessary <code>thisArg</code> parameter when using arrow functions, since arrow functions ignore the <code>this</code> binding.</p>
<h4>Non-compliant code example</h4>
<pre data-diff-id="1" data-diff-type="noncompliant">
const results = items.map(item =&gt; transform(item), context); // Noncompliant
</pre>
<h4>Compliant code example</h4>
<pre data-diff-id="1" data-diff-type="compliant">
const results = items.map(item =&gt; transform(item));
</pre>
<h3>Documentation</h3>
<ul>
  <li> <a href="https://github.com/sindresorhus/eslint-plugin-unicorn#readme">eslint-plugin-unicorn</a> - Rule <a
  href="https://github.com/sindresorhus/eslint-plugin-unicorn/blob/HEAD/docs/rules/no-array-method-this-argument.md">no-array-method-this-argument</a>
  </li>
  <li> MDN - Array.prototype.map() - <a
  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">Documentation for the map() method and its thisArg
  parameter</a> </li>
  <li> MDN - Arrow functions - <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Explanation of
  how arrow functions handle the 'this' keyword</a> </li>
  <li> MDN - Function.prototype.bind() - <a
  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">Documentation for explicit function binding as
  an alternative to thisArg</a> </li>
</ul>
